<template>
    <div class="course-detail">
        <Header></Header>
        <Breadcrumb :breadcrumb="breadcrumb" @onClick="onClick"></Breadcrumb>
        <div class="detail-content">
            <div class="course-info">
                <img :src="courseDetail.pic" alt="">
                <div class="infotext">
                    <h3>{{ courseDetail.title }}</h3>
                    <p class="biaoti">课程简介:</p>
                    <span class="jianjie">{{ courseDetail.desc }}</span>
                    <p class="total">总课程:<span>{{ courseDetail.course_count }}节</span></p>
                </div>
            </div>
            <div class="infolist">
                <div class="list-title">
                    <span></span>
                    <p>课程列表</p>
                </div>
                <div class="keshi">
                    <div class="ksitem" v-for="(item, index) in planList" :key="index">
                        <p class="diji">第{{ (current - 1) * pageData.page_size + index + 1 }}课时</p>
                        <div class="ksxx">
                            <p>课程名称：<span>{{ item.name }}</span></p>
                            <p>课时简介：<span>{{ item.intro }}</span></p>
                        </div>
                        <div class="kj-type">
                            <div class="type-item">
                                <img src="../../assets/icons/ks01.png" alt="">
                                <span>视频：{{ item.video }}</span>
                            </div>
                            <div class="type-item">
                                <img src="../../assets/icons/ks03.png" alt="">
                                <span>PPT：{{ item.ppt }}</span>
                            </div>
                            <div class="type-item">
                                <img src="../../assets/icons/ks07.png" alt="">
                                <span>PDF：{{ item.pdf }}</span>
                            </div>
                            <div class="type-item">
                                <img src="../../assets/icons/ks04.png" alt="">
                                <span>图片：{{ item.pic }}</span>
                            </div>
                        </div>
                        <button class="openware" @click="toPlay(item, index)">打开</button>
                    </div>
                </div>
                <a-pagination v-model="current" @change="onChange" :pageSize="pageData.page_size" :total="pageData.total" show-less-items />
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import Footer from "../../components/Footer.vue";
import Breadcrumb from "../../components/Breadcrumb.vue";
export default {
    name: "CourseDetail",
    components: {Header, Footer, Breadcrumb},
    data() {
        return {
            breadcrumb: [
                {
                    name: "课程中心",
                    path: "/courseCenter"
                },
                {
                    name: "课程详情",
                    //path: "/courseCenter/detail"
                }
            ],
            current: 1,
            courseDetail: {},
            pageData: {
                page: 1,
                page_size: 8,
                total: 0
            },
            planList: []
        }
    },
    mounted() {
        this.getCourseDetail(this.$route.query.id)
        this.getPlanList(this.$route.query.id)
        const user = JSON.parse(localStorage.getItem('userinfo'));
        if (user.id_type === 2) {
          this.breadcrumb = [
            {
              name: "课程中心",
              path: "/teacher"
            },
            {
              name: "课程详情"
            }
          ]
        } else {
          this.breadcrumb = [
            {
              name: "课程中心",
              path: "/courseCenter"
            },
            {
              name: "课程详情"
            }
          ]
        }
    },
    methods: {
        async getCourseDetail(id) {
            const res = await this.$request.get(`api/course/detail?id=${id}`);
            if (res.code === 1) {
                this.courseDetail = res.data;
            } else {
                this.$message.error(res.msg);
                this.courseDetail = {};
            }
        },
        async getPlanList(id) {
            const res = await this.$request.get(`api/course/plan_list?id=${id}&page_size=${this.pageData.page_size}&page=${this.pageData.page}`);
            if (res.code === 1) {
                this.planList = res.data.data;
                this.pageData.total = res.data.total;
            } else {
                this.$message.error(res.msg);
                this.planList = [];
            }
        },
        onChange (val) {
            console.log(val, 'val===');
            this.pageData.page = val;
            this.getPlanList(this.$route.query.id);
        },
        onClick(item) {
            if (item.path) {
                this.$router.push(item.path);
            }
        },
        toPlay(item, index) {
            console.log(item, 'this.courseDetailthis.courseDetail');
            // this.$message.error('无法查看该课程!');
            const userInfo = JSON.parse(localStorage.getItem("userinfo"));
            if (userInfo.id_type == 1 || userInfo.id_type == 0) {
                this.$router.push({
                    path: "/coursePlay",
                    query: {
                        id: this.courseDetail.id,
                        name: this.courseDetail.title,
                        plan_id: item.id,
                        period: (this.current - 1) * this.pageData.page_size + index + 1,
                        review: 1
                    }
                });
            } else if(userInfo.id_type == 2) {
                this.$router.push({
                    path: "/teachPlay",
                    query: {
                        id: this.courseDetail.id,
                        name: this.courseDetail.title,
                        period: (this.current - 1) * this.pageData.page_size + index + 1,
                        plan_id: item.id,
                    }
                });
            }
        }
    }
}
</script>
<style lang="less" scoped>
.course-detail{
    .detail-content{
        max-width: 1200px;
        margin: 0 auto;
        padding-bottom: 30px;
        .course-info{
            display: flex;
            background: #FFFFFF;
            box-shadow: 0px 0px 10px 0px rgba(0,69,207,0.08);
            border-radius: 12px;
            padding: 25px;
            img{
                width: 288px;
                height: 216px;
            }
            .infotext{
                margin-left: 20px;
                text-align: left;
                h3{
                    font-size: 20px;
                    font-weight: 600;
                }
                .biaoti{
                    font-weight: 500;
                    font-size: 15px;
                    color: #000000;
                }
                .total{
                    font-weight: 500;
                    font-size: 15px;
                    color: #000000;
                    margin-top: 15px;
                    span{
                        color: #317AF7;
                    }
                }
                .jianjie{
                    font-weight: 400;
                    font-size: 13px;
                    color: #000000;
                    display: inline-block;
                    // width: 600px;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // white-space: nowrap;
                }
            }
        }
        .infolist{
            margin-top: 30px;
            .list-title{
                display: flex;
                align-items: center;
                padding-bottom: 22px;
                border-bottom: 1px solid #E9E6F2;
                span{
                    width: 4px;
                    height: 18px;
                    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                    border-radius: 7px;
                    margin-right: 10px;
                }
                p{
                    font-weight: 600;
                    font-size: 20px;
                    color: #0C0D0E;
                    margin-bottom: 0px;
                }
            }
            .keshi{
                margin-top: 20px;
                margin-bottom: 30px;
                display: flex;
                flex-wrap: wrap;
                .ksitem{
                    background: #FFFFFF;
                    box-shadow: 0px 2px 12px 0px #E1E3EB;
                    border-radius: 12px;
                    border: 1px solid #FFFFFF;
                    width: 284px;
                    margin-bottom: 20px;
                    margin-right: 20px;
                    .diji{
                        width: 284px;
                        height: 54px;
                        line-height: 54px;
                        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                        border-radius: 12px 12px 0px 0px;
                        font-weight: 500;
                        font-size: 17px;
                        color: #FFFFFF;
                    }
                    .ksxx{
                        padding: 15px;
                        border-bottom: 1px solid #EDF6FF;
                        text-align: left;
                        p{
                            font-weight: 400;
                            font-size: 14px;
                            color: #12192D;
                            span{
                                font-size: 13px;
                                color: #787878;
                            }
                        }
                    }
                    .kj-type{
                        padding: 15px;
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: space-between;
                        .type-item{
                            display: flex;
                            align-items: center;
                            margin-bottom: 17px;
                            img{
                                width: 16px;
                                height: 16px;
                            }
                            span{
                                font-size: 14px;
                                margin-left: 10px;
                                color: #787878;
                            }
                        }
                    }
                    .openware{
                        width: 104px;
                        height: 32px;
                        background: linear-gradient(90deg, #3881F8 0%, #5EA3FE 100%);
                        border-radius: 8px;
                        font-weight: 400;
                        font-size: 13px;
                        color: #FAFBFF;
                        margin: 0px auto 20px auto;
                        border: none;
                        cursor: pointer;
                    }
                    &:nth-child(4n){
                        margin-right: 0px !important;
                    }
                }
            }
        }
    }
}
</style>